<template>
  <Drawer
    v-model:visible="visible"
    title="查看详情"
    @ok="closeModal"
    @cancel="closeModal"
    okText="确认"
    cancelText="取消"
    :width="800"
  >
    <Descriptions size="middle" :column="2" :bordered="true">
      <DescriptionsItem label="订阅应用">{{ info.appName }}</DescriptionsItem>
      <DescriptionsItem label="主机记录">{{ info.hostRecord }}</DescriptionsItem>
      <DescriptionsItem label="记录类型">{{ info.recordType }}</DescriptionsItem>
      <DescriptionsItem label="值">{{ info.recordValue }}</DescriptionsItem>
      <DescriptionsItem label="关联证书">{{ info.certificateName }}</DescriptionsItem>
      <DescriptionsItem label="证书过期时间">{{ info.certificateExpireTime }}</DescriptionsItem>
      <DescriptionsItem label="提示">
        <div>1. 请移步您的DNS服务按照以上信息添加CNAME记录集。</div>
        <div>2. DNS配置完毕后，需要等待10分钟左右方可生效。</div>
        <div>3. DNS解析生效后，请您退出当前应用，并使用新域名登录:</div>
        <div>
          <a @click="jumpHandler">{{ loginUrl }}</a>
        </div>
      </DescriptionsItem>
    </Descriptions>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Descriptions, DescriptionsItem } from 'ant-design-vue';
import { computed, ref } from 'vue';
const info = ref({});
const visible = ref<boolean>(false);

const showModal = (params: any) => {
  info.value = params;
  visible.value = true;
};
const closeModal = () => {
  visible.value = false;
};

const loginUrl = computed(() => {
  const _tmpUrl = info.value.hostRecord;
  return _tmpUrl ? `https://${_tmpUrl.substring(0, _tmpUrl.lastIndexOf('/'))}/admin/login` : '';
});
const jumpHandler = () => {
  window.open(loginUrl.value, '_blank');
};
defineExpose({ showModal });
</script>
